<template>
    script setup
    <div>{{ count1 }}</div>
    <button @click="increment">count++</button>

    深层响应性

    <ul>
        <li>{{ obj.nested }}</li>
        <li v-for="index in [0, 1, 2]">{{ obj.arr[index] }}</li>
    </ul>
    <button @click="mutateDeeply">arr.push</button>




    DOM更新时机
    <button @click="increment1">arr.push</button>
</template>

<script setup>
import { ref } from 'vue'
const count1 = ref(0)
function increment() {
    count1.value++
}


const obj = ref({
    nested: { count2: 0 },
    arr: ['foo', 'bar']
})
function mutateDeeply() {
    obj.value.nested.count2++
    if (obj.value.arr[2] == 'baz') {
        obj.value.arr[2] = ' '
    } else {
        obj.value.arr[2] = 'baz'
    }

}

import { nextTick } from 'vue';

async function increment1() {
    count1.value++
    await nextTick()
}

</script>

<style></style>